<script lang="ts" setup>
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { AreaItem } from '@/apis/model/resolve'
import { Message } from '@arco-design/web-vue'
// import {
//   addApiResolveRegionApi,
//   updateApiResolveRegionApi,
// } from '@/apis/modules/resolve/area'
// import {
//   addComputeMachineGroupApi,
//   getComputeMachineGroupDetailApi,
//   updateComputeMachineGroupApi,
// } from '@/apis/modules/group.ts'
import { addCdnDomainApi, updateCdnDomainApi } from '@/apis/modules/cdn.ts'
// import { getApiResolveDomainsApi } from '@/apis/modules/resolve/domain'

interface IProp {
  record?: AreaItem
}
const props = withDefaults(defineProps<IProp>(), {})
const emit = defineEmits(['reload'])
const visible = defineModel<boolean>('visible', { required: true })
const formRef = ref<FormInstance>()
// const dnsNameOptions = ref<LabelValue[]>([])
const formState = ref({
  name: '',
  remark: '',
})

const rules: Record<string, FieldRule> = {
  name: {
    required: true,
    validator(value, callback) {
      // const reg = /^(?=^.{3,253}$)(?!((.*((--)|(\.-)|(-\.))[^.])|(^-.*)))([\w\-]{1,63}\.)+[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/i
      const reg = /^$/
      if (!value) {
        callback('请输入域名')
        return
      }
      if (!reg.test(value)) {
        callback('域名格式不正确')
        return
      }
      callback()
    },
  },
  dns_api_id: { required: true, message: '请选择 DNS 账号' },
}

async function handleOpen() {
  try {
    // const res = await getComputeMachineGroupDetailApi({ limit: 0 })
    // const list = res.list ?? []
    // dnsNameOptions.value = list
    //   .map(item => ({ label: item.name!, value: item.id! }))
    //   .filter(Boolean)
  } catch (error) {
    console.error(error)
  }
  if (props.record) {
    formState.value.name = props.record.name!
    formState.value.remark = props.record.remark!
  }
}
async function handleSubmit() {
  const error = await formRef.value?.validate()
  if (error)
    return false

  const fn = props.record ? updateCdnDomainApi : addCdnDomainApi
  const data = props.record
    ? { id: props.record.id!, ...formState.value }
    : formState.value
  await fn(data).then(() => {
    Message.success('操作成功')
    visible.value = false
    emit('reload')
  })
}

function handleClose() {
  formRef.value?.resetFields()
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="编辑备注"
    :width="480"
    ok-text="保存"
    :mask-closable="false"
    :before-open="handleOpen"
    :before-ok="handleSubmit"
    :before-close="handleClose"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      :rules="rules"
      :model="formState"
    >
      <a-form-item
        label=""
        field="remark"
        asterisk-position="end"
      >
        <a-textarea
          v-model="formState.remark"
          :max-length="200"
          show-word-limit
          :auto-size="{ maxRows: 5, minRows: 5 }"
          placeholder="请输入备注"
        />
      </a-form-item>
    </a-form>
  </resource-dialog>
</template>
